<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="header">
        <div class="one"><i class="el-icon-setting" style="font-size: 35px;padding: 0 15px;  padding-top: 20px;" /> 管理员用户{{ item.admin_num }}名</div>
        <div class="two"><i class="el-icon-user" style="font-size: 35px;padding: 0 15px;padding-top: 20px;" />平台注册用户{{ total.total }}名</div>
        <div class="three"><i class="el-icon-document" style="font-size: 40px;padding: 0 15px;padding-top: 20px;" />平台文章总数{{ item.article_num }}篇</div>
        <div class="four"><i class="el-icon-date" style="font-size: 35px;padding: 0 15px;padding-top: 20px;" />广告位{{ item.advpos_num }}个广告图{{ item.advimg_num }}张</div>
      </div>

      <div class="fix">
        <div class="top">
          <div class="head">最新注册新用户</div>
          <div id="yonghu" class="foto">
            <p v-for="ite in list" :key="ite.id">
              {{ ite.username }} <span style="float: right;padding-right: 266px;">{{ ite.sex === 0 ? '男' : '女' }}</span>
            </p>
          </div>
        </div>
        <div class="top">
          <div class="head">点赞文章排行</div>
          <div id="xinwen" class="foto">
            <p v-for="index in hotList" :key="index.id">{{ index.title }}</p>
          </div>
        </div>
        <div class="top">
          <div class="head">用户性别分析</div>
          <div id="bintu" />
        </div>
      </div>

      <div id="buttom" />
    </div>
  </div>
</template>

<script>
import { GetEchart } from '@/api/user'
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data() {
    return {
      item: {},
      total: {},
      hotList: [],
      list: [],
      man: 0, // 男生
      woman: 0, // 女生,
      allList: []
    }
  },
  async mounted() {
    const { data } = await GetEchart()
    console.log(data)
    this.item.advpos_num = data.advpos_num
    this.item.admin_num = data.admin_num
    this.item.advimg_num = data.advimg_num
    this.item.article_num = data.article_num
    this.total = data.user
    this.list = data.new_user
    this.hotList = data.hot_article
    this.man = data.user.user_man
    this.woman = data.user.user_woman
    this.allList = data.all_cate
    this.getEachet()
    this.treeEcahrt()
  },
  methods: {
    getEachet() {
      var chartDom = document.getElementById('bintu')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '男女生占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.woman, name: '女生' },
              { value: this.man, name: '男生' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    },
    treeEcahrt() {
      var chartDom = document.getElementById('buttom')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '各分类文章发布数量',
          textStyle: {
            color: '#5470c6'
          },
          left: '35%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: this.allList.map(item => item.catename),
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.allList.map(item => item.num)
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-container{
 padding-top: 20px;
}
.header{
   /* width: 100%; */
  display: flex;
  flex: 4;
  justify-content: space-between;
  height: 81px;
  line-height: 81px;
  font-size: 16px;
  color: azure;
  /* background-color: blue; */
  /* text-align: center; */
}

.header .one{
  flex: 1;
  background-color:rgb(251,109,73);
 border-radius: 5px;
 margin: 0 20px 0 10px;
}

.header .two{
  flex: 1;
  background-color:rgb(103,194,58);
  border-radius: 5px;
  margin: 0 20px 0 0;
}

.header .three{
  flex: 1;
  background-color:rgb(230,162,60);
  border-radius: 5px;
  margin: 0 20px 0 0;
}

.header .four{
  flex: 1;
  background-color:rgb(58,124,231);
  border-radius: 5px;
  margin: 0 10px 0 0;
}

.fix{
  height: 406px;
  display: flex;
  flex:3;
  margin-top: 10px;
  margin-left: 10px;
}

.top {
  height: 100%;
  flex: 1;
  background-color: #fff;
  margin-right: 15px;

  border: 1px solid rgb(204,204,204);
  border-radius: 5px;
}

 .head{
  width: 100%;
  height: 50px;
  background-color: rgb(221,221,221);
  font-size: 16px;
  line-height: 50px;
  color: black;
  text-align: left;
}

.foto p{
  height: 36.5px;
  border-bottom: 1px dashed rgb(204,204,204);
  font-size: 14px;
  line-height: 26px;
  padding-left: 15px;
}

.center {
  height: 100%;
  flex: 1;
  background-color: #fff;
  margin-right: 15px;
}

.bottom {
  height: 100%;
  flex: 1;
  background-color: #fff;
  margin-right: 10px;
}

#buttom{
  width: 1618px;
  height: 320px;
  background-color: #fff;
  margin:15px 18px 0 18px;
}

#bintu{
  width: 600px;
  height: 320px;
  text-align: center;
}

</style>
